<template>
    <div id="bodyBox">
        <el-form :model="state.form" label-width="120px" label-position="top" ref="ruleFormRef">
            <el-tabs v-model="activeName" type="border-card" class="demo-tabs">
                <!-- @tab-click="handleClick" -->
                <el-tab-pane label="蚂蚁链合同参数配置" name="first">
                    <firstTab :premissionData="premission" v-if="activeName == 'first'"></firstTab>
                    <!-- <el-row :gutter="100" v-if="activeName == 'first'">
                        <el-col :span="12">
                            <el-form-item
                                label="accessKey【访问Key】"
                                prop="accessKey"
                                :rules="[{ required: true, message: '请输入' }]"
                            >
                                <el-input v-model="state.form.accessKey" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="secretKey【访问密钥】"
                                prop="secretKey"
                                :rules="[{ required: true, message: '请输入' }]"
                            >
                                <el-input v-model="state.form.secretKey" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="endpoint【端点】"
                                prop="endpoint"
                                :rules="[{ required: true, message: '请输入' }]"
                            >
                                <el-input v-model="state.form.endpoint" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="ID【实例ID】"
                                prop="instanceId"
                                :rules="[{ required: true, message: '请输入' }]"
                            >
                                <el-input v-model="state.form.instanceId" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="address【模版地址】"
                                prop="address"
                                :rules="[{ required: true, message: '请输入' }]"
                            >
                                <el-input v-model="state.form.address" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="callbackAddress【请求回调地址】"
                                prop="callbackAddress"
                                :rules="[{ required: true, message: '请输入' }]"
                            >
                                <el-input v-model="state.form.callbackAddress" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="Request address【请求环境地址】"
                                prop="requestAddress"
                                :rules="[{ required: true, message: '请输入' }]"
                            >
                                <el-input v-model="state.form.requestAddress" />
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                </el-tab-pane>
                <el-tab-pane label="oss对象存储参数配置" name="second" v-if="premission.ossList">
                    <secondTab :premissionData="premission" ref="secondRef" v-if="activeName == 'second'"></secondTab>
                    <!-- <el-row :gutter="100" v-if="activeName == 'second'">
                        <el-col :span="12">
                            <el-form-item
                                label="accessKey【访问Key】"
                                prop="accessKey"
                                :rules="[{ required: true, message: '请输入' }]"
                            >
                                <el-input v-model="state.form.accessKey" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="secretKey【访问密钥】"
                                prop="secretKey"
                                :rules="[{ required: true, message: '请输入' }]"
                            >
                                <el-input v-model="state.form.secretKey" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="endpoint【端点】"
                                prop="endpoint"
                                :rules="[{ required: true, message: '请输入' }]"
                            >
                                <el-input v-model="state.form.endpoint" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="bucket name【桶名】"
                                prop="bucketName"
                                :rules="[{ required: true, message: '请输入' }]"
                            >
                                <el-input v-model="state.form.bucketName" />
                            </el-form-item>
                        </el-col> -->
                    <!-- <el-col :span="12">
                            <el-form-item label="httpPrefix【请求协议前缀】">
                                <el-input v-model="state.form.name6" />
                            </el-form-item>
                        </el-col> -->
                    <!-- </el-row> -->
                </el-tab-pane>
                <el-tab-pane label="物流参数配置" name="third" v-if="premission.logisticsList">
                    <thirdTab :premissionData="premission" ref="thirdRef" v-if="activeName == 'third'"></thirdTab>

                    <!-- <el-row :gutter="100" v-if="activeName == 'third'">
                        <el-col :span="12">
                            <el-form-item
                                label="顾客编码"
                                prop="clientCode"
                                :rules="[{ required: true, message: '请输入' }]"
                            >
                                <el-input v-model="state.form.clientCode" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="校验码"
                                prop="checkWord"
                                :rules="[{ required: true, message: '请输入' }]"
                            >
                                <el-input v-model="state.form.checkWord" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="Request address【请求环境地址】"
                                prop="requestAddress"
                                :rules="[{ required: true, message: '请输入' }]"
                            >
                                <el-input v-model="state.form.requestAddress" />
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                </el-tab-pane>
                <el-tab-pane label="支付服务参数配置" name="fourth">
                    <fourthTab :premissionData="premission" v-if="activeName == 'fourth'"></fourthTab>
                    <!-- <el-row :gutter="100" v-if="activeName == 'fourth'">
                        <el-col :span="12">
                            <el-form-item label="支付宝账户ID" prop="generalId" :rules="[{ required: true, message: '请输入' }]">
                                <el-input v-model="state.form.generalId" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="服务器网管地址" prop="address" :rules="[{ required: true, message: '请输入' }]">
                                <el-input v-model="state.form.address" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="小程序应用ID" prop="instanceId" :rules="[{ required: true, message: '请输入' }]">
                                <el-input v-model="state.form.instanceId" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="私钥" prop="accessKey" :rules="[{ required: true, message: '请输入' }]">
                                <el-input v-model="state.form.accessKey" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="公钥" prop="secretKey" :rules="[{ required: true, message: '请输入' }]">
                                <el-input v-model="state.form.secretKey" />
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                </el-tab-pane>
                <!-- <el-tab-pane label="芝麻免押参数配置" name="fiveth">
                    <el-row :gutter="100" v-if="activeName == 'fiveth'">
                        <el-col :span="12">
                            <el-form-item label="支付宝账户ID" prop="generalId" :rules="[{ required: true, message: '请输入' }]">
                                <el-input v-model="state.form.generalId" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="服务器网管地址" prop="address" :rules="[{ required: true, message: '请输入' }]">
                                <el-input v-model="state.form.address" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="小程序应用ID" prop="instanceId" :rules="[{ required: true, message: '请输入' }]">
                                <el-input v-model="state.form.instanceId" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="私钥" prop="accessKey" :rules="[{ required: true, message: '请输入' }]">
                                <el-input v-model="state.form.accessKey" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="公钥" prop="secretKey" :rules="[{ required: true, message: '请输入' }]">
                                <el-input v-model="state.form.secretKey" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="芝麻信用服务ID" prop="sesameCreditId" :rules="[{ required: true, message: '请输入' }]">
                                <el-input v-model="state.form.sesameCreditId" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="芝麻信用类目" prop="sesameCreditCategory" :rules="[{ required: true, message: '请输入' }]">
                                <el-input v-model="state.form.sesameCreditCategory" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane> -->
                <el-tab-pane label="短信参数配置" name="sixth" v-if="premission.smsList">
                    <sixthTab :premissionData="premission" v-if="activeName == 'sixth'"></sixthTab>
                </el-tab-pane>
            </el-tabs>
            <!-- <el-form-item
                class="last_formItem"
                v-if="activeName == 'first' || activeName == 'second'"
            >
                <el-button
                    type="primary"
                    
                    @click="onSubmit"
                    style="background: #ff554b; border: #ff554b"
                >
                    保存
                </el-button>
            </el-form-item> -->
        </el-form>
    </div>
</template>

<script>
export default {
    name: '第三方配置参数',
};
</script>
<script setup>
import { service, cache } from '@utils';
import { method } from 'lodash';
import { reactive, onMounted, toRaw, ref, createVNode } from 'vue';
import { usePremission } from '@hooks';
import thirdTab from './third.vue';
import secondTab from './second.vue';
import sixthTab from './sixth.vue';
import firstTab from './first.vue';
import fourthTab from './fourth.vue';
const premission = usePremission({
    ossList: 'oss:config:list', //oss查询
    ossAdd: 'oss:config:add', //oss添加
    ossDelete: 'oss:config:delete', //oss删除
    ossEdit: 'oss:config:edit', //oss修改
    logisticsList: 'logistics:config:list', //oss查询
    logisticsAdd: 'logistics:config:add', //物流添加
    logisticsDelete: 'logistics:config:delete', //oss删除
    logisticsEdit: 'logistics:config:edit', //oss修改
    smsList: 'sms:config:list', //短信查询
    smsAdd: 'sms:config:add', //短信添加
    smsDelete: 'sms:config:delete', //短信删除
    smsEdit: 'sms:config:edit', //短信修改
    contractList: 'contract:config:list', //合同查询
    contractAdd: 'contract:config:add', //合同添加
    contractDelete: 'contract:config:delete', //合同删除
    contractEdit: 'contract:config:edit', //合同修改
    payAdd:'pay:config:add',//支付添加
    payDelete:'pay:config:delete',//支付删除
    payEdit:'pay:config:edit',//支付修改
    payDefault:'pay:config:setDefaultConfig',//支付默认
    contracDefault:'contract:config:setDefaultConfig',//合同_默认
    ossDefault:'oss:config:setDefaultConfig',//oss_默认
    logisticsDefault:'logistics:config:setDefaultConfig',//物流_默认
    smsDefault:'sms:config:setDefaultConfig',//短信_默认
});
let state = reactive({
    form: {},
});
const ruleFormRef = ref();
const thirdRef = ref();
let activeName = ref('first');
onMounted(() => {
    // winload()
});
const handleClick = async (tab, event) => {
    // activeName.value = tab.props.name
};

const onSubmit = () => {
    ruleFormRef.value.validate(valid => {
        if (valid) {
            ElMessageBox.confirm(`您确定要修改配置?`).then(async () => {
                submitFn();
            });
        } else {
            ElMessage.warning('请检查必填项');
        }
    });
};
const winload = async () => {
    let res = await service.sys.sysFindAntChain();
    if (res.code == 200) {
        state.form = res.data || {};
        return res.data;
    }
};
const submitFn = async () => {
    let res;
    switch (activeName.value) {
        case 'first':
            res = await service.sys.sysFindAntChainUpdate(state.form);
            break;
        case 'second':
            res = await service.sys.sysFindOssUpdate(state.form);
            break;
        case 'third':
            res = await service.sys.sysFindShunFenUpdate(state.form);
            break;
        // case 'shunfeng':
        //     res = await service.sys.sysFindShunFenUpdate(state.form)
        //     break

        default:
            break;
    }
    if (res.code == 200) ElMessage.success('修改成功');
};
</script>
<style scoped lang="scss">
#bodyBox {
    margin: 20px 24px;
    width: 100%;
}
:deep(.el-tabs__content) {
    height: 70vh !important;
}
.last_formItem {
    margin-top: 20px;
    float: right;
}
.demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
:deep(.el-tabs__item.is-active) {
    color: #ff554b !important;
    background: #fff;
}
:deep(.el-tabs__item:hover) {
    color: #ff554b !important;
}
</style>
